<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">{{title}}</block>
		</cu-custom>

		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect(index)"
			 :data-id="index">
				{{item.name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		component: {},
		data() {
			return {
				title: '首页',
				TabCur: 0,
				scrollLeft: 0,
				tabList: [{
					name: '段子'
				}, {
					name: '美文'
				}, {
					name: '心情'
				}, {
					name: '沙雕图'
				}, {
					name: '冷笑话'
				}, {
					name: '游戏'
				}, {
					name: '推荐'
				}, {
					name: '音乐'
				}, {
					name: '电影'
				}, {
					name: '秘密'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			tabSelect(index) {
				//console.log(this.tabList[e.currentTarget.dataset.id]);
				this.TabCur = index;
				this.scrollLeft = (index - 1) * 50
				this.title = this.tabList[index].name;
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style>

</style>
